<template>
	<view class="container">
			<z-paging ref="paging" loading-more-no-more-text="咱也是有底线的！" :auto-show-back-to-top="true" v-model="dataList"
						@query="queryList" :style="{ paddingTop: statusBarHeight + 'px' }">
			<template #top>
				<uni-nav-bar fixed="false" :right-text="leftText" backgroundColor="#4d71f1" color="#ffffff" title="绩效考核"
				 @clickRight="addPerformance" />					
			</template>
			<uni-easyinput prefixIcon="search" v-model="queryKeyword" placeholder="主题" @iconClick="queryClick" clearSize="25">
			</uni-easyinput>
			<!-- <uni-easyinput  @iconClick="onShowDatePicker">
				<uni-icons slot="searchIcon" color="#999999" size="18" type="home" />
			</uni-easyinput> -->			
			<!-- <text class="item-content" style="font-size: 24rpx;"><uni-icons type="calendar-filled" @click="onShowDatePicker" size="25"></uni-icons> 
			{{dateRange[0]}} 至 {{dateRange[1]}}
			</text> -->
			<view class="flex-container flex-container-center"> 
				<uni-easyinput prefixIcon="calendar-filled" v-model="dateRangeLabel" placeholder="起止时间"
				 @iconClick="onShowDatePicker" disabled >
				</uni-easyinput>		
				<uni-icons type="clear" @click="clearRange" size="25" style="align-items: center;"></uni-icons>	
			</view>			
			<!-- <uni-datetime-picker v-model="dateRange" type="daterange"
							@change="queryClick" :clear-icon="false" @maskClick="maskClick"/> -->
			<z-tabs :list="tabList" :current="tabIndex" @change="tabsChange" />	
			
			<view class="list-item" v-for="(item, index) in dataList" :key="index" >	
				<view  class="item-content" >
					<uni-card :is-shadow="false" is-full >
						<text class="uni-h8">
							 <view class="flex-container"> 
								<uni-title type="h2" class="flex-item" :title="item.createDate"></uni-title>
								<button v-if="isAdmin===1 && tabIndex!=2"
								style="width: 150rpx;height: 50rpx;" class="flex-item" type="warn" size="mini" @click="deletePerformance(item,index)">删除</button>
								<button type="warn"  class="flex-item" style="width: 150rpx;height: 50rpx;" 
								v-if="isAdmin===1 && tabIndex===1 && item.fisSuccess==null" size="mini" @click="goEvaluation(item,index)">审批</button>
								
							 </view>
						</text> 
						<view class="uni-flex uni-row">
							<view class="card-flex-item ">
								<view class="card-flex-item-T">考核主题</view>
								<view class="card-flex-item-V">{{item.evaluationTitle}}</view>
							</view>
							<view class="card-flex-item ">
								<view class="card-flex-item-T">考核周期</view>
								<view class="card-flex-item-V">{{item.startDate}}--{{item.endDate}}</view>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="card-flex-item ">
								<view class="card-flex-item-T">奖励金额</view>
								<view class="card-flex-item-V">{{item.money}}</view>
							</view>
							<view class="card-flex-item ">
								<view class="card-flex-item-T">创建人</view>
								<view class="card-flex-item-V">{{item.createName}}</view>
							</view>
						</view>
						<view class="uni-flex uni-row">
							<view class="card-flex-item ">
								<view class="card-flex-item-T">被考核人</view>
								<view class="card-flex-item-V">{{item.userName}}</view>
							</view>
							
						</view>
						<view class="uni-flex uni-row">
							<view class="card-flex-item ">
								<view class="card-flex-item-T">考核内容</view>
								<view class="card-flex-item-V">
									<mp-html :content="item.content" :lazy-load="true"></mp-html>
								</view>
							</view>
						</view>
						<view v-if="item.fisSuccess!=null" class="uni-flex uni-row">							
							<view class="card-flex-item">
								<view class="card-flex-item-T">考核结果</view>
								<view v-if="item.fisSuccess==1" class="card-flex-item-V" style="color: green;">{{item.pass}}</view>
								<view v-if="item.fisSuccess==0" class="card-flex-item-V" style="color: red;">{{item.pass}}</view>
							</view>
							<view class="card-flex-item ">
								<view class="card-flex-item-T">考核评论</view>
								<view class="card-flex-item-V">
									<view class="card-flex-item-V">{{item.comments}}</view>
								</view>
							</view>
						</view>
						<view v-if="item.fisSuccess!=null && tabIndex==2" class="uni-flex uni-row">
							<view class="card-flex-item ">
								<view class="card-flex-item-T">考核时间</view>
								<view class="card-flex-item-V">{{item.createTime}} </view>
							</view>
							<view class="card-flex-item">
								<view class="card-flex-item-T">审批时间</view>
								<view class="card-flex-item-V">{{item.resCreateTime}}</view>
							</view>
						</view>
						<view v-if="tabIndex!=2" class="uni-flex uni-row">
							<view class="card-flex-item ">
								<view class="card-flex-item-T">考核时间</view>
							</view>
							<view class="card-flex-item">
								<view class="card-flex-item-T">{{item.createTime}}</view>
							</view>
						</view>
					</uni-card>
				</view>			
			</view>
		
		</z-paging>		 
		 <mxDatepicker :show="showPicker" type="range" @confirm="onSelected" @cancel="onSelected" />
	</view>
</template>

<script>
	import { getToken, getUser } from '@/utils/auth';
	import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
	export default {
		components: {
			mxDatepicker,
		},
		data() {
			return {
				value: '',
				type: 'range',
				showPicker: false,
				queryKeyword:'',
				dateRange: [],
				dateRangeLabel:'',
				startDate: '',
				endDate: '',
				isAdmin:1,
				dataList: [],
				tabList: ['未开始','已开始待审批','已结束'],
				tabIndex: 0,
				leftText: '',
				statusBarHeight: 100 // 状态栏高度
			}
		},
		onLoad(options) {
		},
		created() {
			const userInfo = getUser()
			console.log('onLoad this.userInfo.isAdmin ',userInfo.isAdmin);
			this.leftText=userInfo.isAdmin==1?'添加':'';
			this.isAdmin = userInfo.isAdmin;
		},
		mounted() {
			// 获取设备信息
			const systemInfo = uni.getSystemInfoSync();
			// 获取状态栏高度
			this.statusBarHeight = systemInfo.statusBarHeight; 
			console.log('mounted statusBarHeight ',this.statusBarHeight);
			const self = this; 
			uni.$on('update:evaluation', function(data) {
				//触发更新后
				//console.log('evaluation触发更新后->', self.tabIndex);
				self.tabsChange(2)
			})
			uni.$on('update:performance',function(data) {
				console.log('performance触发更新后->', data);
				self.tabIndex = data;
				self.$refs.paging.reload();
			})
		},
		onUnload() {
			// 移除监听事件  
			uni.$off('update:performance');
			uni.$off('update:evaluation');
		},
		methods: {
			queryClick(){
				console.log('点击了queryClick');
				this.$refs.paging.reload();
			},
			onShowDatePicker(){//显示
				console.log('点击了onShowDatePicker');
				this.showPicker = true;
			},
			clearRange(){
				this.dateRangeLabel = "";
				this.dateRange =[];
				this.$refs.paging.reload();
			},
			onSelected(e) {//选择
				this.showPicker = false;
				if(e) {
					//选择的值
					console.log('value => '+ e.value);
					//原始的Date对象
					console.log('date => ' + e.date);
					this.dateRange = e.value;
					this.dateRangeLabel = this.dateRange[0] +"至"+this.dateRange[1]
					this.$refs.paging.reload();
				}else{
					this.dateRange = [];
					this.dateRangeLabel = '';
					this.$refs.paging.reload();
				}
			},
			addPerformance(){
				if (this.isAdmin===0){
					return;
				}
				console.log('点击了addPerformance');
				uni.navigateTo({
					url:'/pages/tab3/performance'
				}); 
			},
			// myevaluations(){
			// 	console.log('点击了myevaluations');
			// 	uni.navigateTo({
			// 		url:'/pages/tab3/myevaluations'
			// 	}); 
			// },			
			tabsChange(index) {
				this.tabIndex = index;
				// 当切换tab或搜索时请调用组件的reload方法，请勿直接调用：queryList方法！！
				this.$refs.paging.reload();
				console.log('监听事件  addPerformance',index);
			},
			queryList(pageNo, pageSize) {
				// 组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				// 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				this.startDate = '';
				this.endDate = '';
				if (this.dateRange.length>0){
					this.startDate = this.dateRange[0];
					this.endDate = this.dateRange[1];
				} 
				const data = {
					keyword: this.queryKeyword,
					startDate: this.startDate,
					endDate: this.endDate,
					pageNo: pageNo,
					pageSize: pageSize,
					type: this.tabIndex + 1
				}
				//console.log('分页数据->', data);
				// let url = "/api/Performance/getPerformanceList";
				// if (this.isAdmin===0){
				// 	url = "/api/Performance/getPerformanceResults";
				// }
				this.$myRequest.postRequest("/api/Performance/getPerformanceList", data).then(res => {
					console.log('请求的结果数组->', res);
					if (res.data.statusCode===0){
						uni.showToast({
							title: res.data.msg,
							icon: "none",
							duration: 1000
						});
						return;
					}
					this.$refs.paging.complete(res.data.data.list);					
				}).catch(res => {
					// 如果请求失败写this.$refs.paging.complete(false);
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			// itemClick(item, index) {
			// 	if (this.tabIndex==0) {
			// 		return;
			// 	}
				
			// 	if (this.isAdmin===0){
			// 		console.log('点击了绩效单', item.resultId);
			// 		uni.navigateTo({
			// 			url:'/pages/tab3/evaluations?type=detail&id='+item.resultId+'&title='+item.evaluationTitle
			// 		}); 
			// 	}else{
			// 		console.log('点击了考核单', item.title);
			// 		uni.navigateTo({
			// 			url:'/pages/tab3/performance?id='+item.evaluationId
			// 		}); 	
			// 	}								
			// },
			deletePerformance(item, index) {
				if (this.tabIndex===2) {
					return;
				}
				const data = {
					evaluationId: item.evaluationId,
					personIds: item.userId,
				}
				this.$modal.confirm('确定删除绩效单吗？').then(() => {
					if (this.isAdmin===1){
						console.log('deletePerformance点击了绩效单', item.evaluationId);
						uni.showLoading({title: '删除中',mask:true});
						this.$myRequest.postRequest("/api/Performance/deletePerformance", data).then(res => {
							setTimeout(function () {uni.hideLoading();}, 100);
							console.log('返回->', res);
							this.tabsChange(this.tabIndex);
							
						});   
					}
				})
				
			},
			goEvaluation(item, index){
				console.log('点击了evaluations');
				uni.navigateTo({
					url:'/pages/tab3/evaluations?type=doEvaluation&id='+item.evaluationId+"&pid="+item.userId+'&title='+item.evaluationTitle
				}); 
			},
		}
	}
</script>

<style scoped>	 
	.container {
		display: flex;
		flex-direction: column;
		width: 100vw;
		padding-bottom: 100rpx;
	}
	.item {
		position: relative;
		height: 130rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}
	.item-content{
		flex: 1;
		margin-left: 20rpx;
	}
	.item-detail {
		padding: 5rpx 15rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		color: white;
		background-color: #73a9ff;
	}
	.flex-container {
	  display: flex;
	  justify-content: space-between; /* 或者使用 flex-start, flex-end, center 等 */
	}
	 
	.flex-item {
	  /* 可以根据需要添加一些样式 */
	  font-size: 12px;
	}
	.item-line {
		position: absolute;
		bottom: 0rpx;
		left: 0rpx;
		height: 1px;
		width: 100%;
		background-color: #eeeeee;
	}
	.list-item {
	  padding: 10rpx 16rpx;
	}
	.uni-flex{
		 display: flex;
	}
	.card-flex-item {
		width: 100%;
		text-align: center;
		flex-direction: row;
	}
	.card-flex-item-T {
		width: 100%;
		height: 150rpx;
		text-align: left;
		font-size: 20upx;
		flex: 1;
		color: #878282;
		height: 50upx;
		line-height: 50upx;
	}
	.card-flex-item-V {
		width: 100%;
		height: 150rpx;
		text-align: left;
		font-size: 20upx;
		flex: 1;
		min-height: 50upx;
		line-height: 50upx;
		height:auto;
		color: #333;
		font-weight: 700;
	}
	.flex-container-center {
	  justify-content: center; /* 水平居中 */
	  align-items: center;
	}
</style>